<!--  -->
<template>
  <div class="bar">
    <h1><span>演职员</span><img src="@/assets/img/right-arrow.png" alt="" style="float:right; margin-top: 0.025rem; margin-left: 0.2rem; width: 0.15rem;"><span style="float: right;font-size: 0.24rem; color:#8A8A8A;font-weight: 300;">全部</span></h1>
    <div class="container">
        <div v-for="(item,index) in actor" :key="index"><img :src="director.avatar" alt="" v-if="index==0"><img :src="item.avatar" alt="" v-else><p class="name" v-if="index==0">{{director.name}}</p><p class="name" v-else>{{item.name}}</p><p class="identity" v-if="index==0">导演</p><p class="identity" v-else>饰</p></div>
        
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data () {
    return {

    };
  },

  components: {},

  computed:{
        ...mapState({
            actor:(state)=>state.Detail.actorList,
            director:(state)=>state.Detail.director
        })
  },

  mounted(){
  },

  methods: {}
}

</script>
<style lang='less' scoped>
.bar{
      border-top:solid #eee 0.02rem;
      margin-left: 0.43rem;
      margin-right: 0.43rem;
  
    h1{
        font-size: 0.38rem;
        margin-top:0.5rem;
        margin-bottom: 0.5rem;
    }
}
.container{
    margin-bottom: 0.58rem;
    overflow-x: scroll; -webkit-overflow-scrolling:touch;display: -webkit-box;white-space: nowrap;
    div{
        display: inline-block;
        
        img{
            width: 1.48rem;
            padding-right: 0.21rem;
        }
        .name{
          font-size:0.28rem;
          color:#535353;
          text-align:center;
          padding-right: 0.2rem;
          text-align: left;
        }
        .identity{
          font-size: 0.24rem;
          text-align: left;
        }
    }
}
</style>